<div class="home_header" ng-init="loadUser()">
    <div class="user-controls">
        <div class="btn-group" dropdown>
            <button type="button" class="btn btn-info" ng-disabled="true"><span class="glyphicon glyphicon-user" style="margin-right: 10px"></span>{{user.name}} - {{user.ctx.name}}</button>
            <button type="button" class="btn btn-info dropdown-toggle">
                <span class="caret"></span>
                <span class="sr-only">Split button!</span>
            </button>
            <ul class="dropdown-menu">
                <li class="dropdown-li" ng-click="editProfile()">Profile</li>
                <li class="dropdown-li" ng-click="editPreferences()">Preferences</li>
                <li class="dropdown-li" ng-click="forget()">Forget All</li>
                <li class="divider"></li>
                <li class="dropdown-li" ng-click="logoutUser()">Logout</li>
            </ul>
        </div>
    </div>
</div>

<div class="content-holder">
    <div class="home-navigation col-md-2">
        <ul class="nav nav-pills nav-stacked">
            <li id="nav0" class="active-nav-li" ng-click="setActivePane(0)">Home</li>
            <li id="nav7" class="nav-li" ng-click="setActivePane(7)">Manage Contexts</li>
            <li id="nav5" class="nav-li" ng-click="setActivePane(5)">Browse Videos</li>
            <li id="nav1" class="nav-li" ng-click="setActivePane(1)">Recommendations<span class="badge">{{all_recommendations.length}}</span></li>
            <li id="nav3" class="nav-li" ng-click="setActivePane(3)">Interests<span class="badge">{{all_interests.length}}</span></li>
            <li id="nav2" class="nav-li" ng-click="setActivePane(2)">Watch History</li>
            <li id="nav8" class="nav-li" ng-click="setActivePane(8)">Group Watching</li>
            <li ng-if="isAdmin()" id="nav4" class="ng-hide nav-li" ng-click="setActivePane(4)">Visualization</li>
            <li ng-if="isAdmin()" id="nav6" class="ng-hide nav-li" ng-click="setActivePane(6)">Admin Controls</li>  
        </ul>
    </div>
    <div class="main-content" ng-switch on="active_pane">
        <div ng-switch-when="0">
            <div class="content-pane" ng-include="'components/dashboard.html'"></div>
        </div> 
        <div ng-switch-when="1">
            <div class="content-pane" ng-include="'components/recommendations.html'"></div>
        </div>
        <div ng-switch-when="2">
            <div class="content-pane" ng-include="'components/history.html'"></div>
        </div>
        <div ng-switch-when="3">
            <div class="content-pane" ng-include="'components/interests.html'"></div>
        </div>
        <div ng-switch-when="4">
            <div class="content-pane" ng-include="'components/visualization.html'"></div>
        </div>
        <div ng-switch-when="5">
            <div class="content-pane" ng-include="'components/browse.html'"></div>
        </div>
        <div ng-switch-when="-1">
            <div class="content-pane" ng-include="'components/watch.html'"></div>
        </div>
        <div ng-switch-when="-2">
            <div class="content-pane" ng-include="'components/explore_interest.html'"></div>
        </div>
        <div ng-switch-when="-3">
            <div class="content-pane" ng-include="'components/edit_preferences.html'"></div>
        </div>
        <div ng-switch-when="-4">
            <div class="content-pane" ng-include="'components/edit_profile.html'"></div>
        </div>
        <div ng-switch-when="6">
            <div class="content-pane" ng-include="'components/admin.html'"></div>
        </div>
        <div ng-switch-when="7">
            <div class="content-pane" ng-include="'components/contexts.html'"></div>
        </div>
        <div ng-switch-when="8">
            <div class="content-pane" ng-include="'components/group_recommendations.html'"></div>
        </div>
    </div>
</div>

